<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片预览与切换</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .preview-container {
        width: 100%;
        max-width: 800px;
        margin-bottom: 30px;
      }

      .large-preview {
        width: 100%;
        height: 400px;
        border: 1px solid #ddd;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;
        overflow: hidden;
      }

      .large-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }

      .thumbnail-container {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .thumbnail-scroll {
        display: flex;
        overflow-x: hidden;
        width: 80%;
        scroll-behavior: smooth;
      }

      .thumbnail {
        min-width: 100px;
        height: 80px;
        margin: 0 5px;
        border: 2px solid #ddd;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;
        flex-shrink: 0;
      }

      .thumbnail img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }

      .thumbnail.active {
        border-color: #4285f4;
      }

      .arrow {
        font-size: 24px;
        cursor: pointer;
        padding: 10px;
        user-select: none;
      }

      /* .image-info {
        margin-top: 10px;
        text-align: center;
        color: #666;
      } */
    </style>
  </head>
  <body>
    <div class="preview-container">
      <div class="large-preview">
        <img id="largeImage" src="" alt="预览图" />
      </div>
      <!-- <div class="image-info" id="imageInfo">请选择图片查看详情</div> -->
    </div>

    <div class="thumbnail-container">
      <div class="arrow" id="prevBtn">❮</div>
      <div class="thumbnail-scroll" id="thumbnailScroll">
        <!-- 缩略图将通过JavaScript动态添加 -->
      </div>
      <div class="arrow" id="nextBtn">❯</div>
    </div>

    <script>
      // 图片数据 - 这里使用示例数据，实际应用中可以从服务器获取
      const images = [
        {
          id: 1,
          largeUrl: 'https://via.placeholder.com/800x400?text=图片1',
          thumbUrl: 'https://via.placeholder.com/100x80?text=图片1',
          info: '2025-04-20 11:18:38\n22okU孔滴I II 线3小号侧'
        },
        {
          id: 2,
          largeUrl: 'https://via.placeholder.com/800x400?text=图片2',
          thumbUrl: 'https://via.placeholder.com/100x80?text=图片2',
          info: '09:45:58 小豆洲'
        },
        {
          id: 3,
          largeUrl: 'https://via.placeholder.com/800x400?text=图片3',
          thumbUrl: 'https://via.placeholder.com/100x80?text=图片3',
          info: '09:15:30 小豆洲'
        },
        {
          id: 4,
          largeUrl: 'https://via.placeholder.com/800x400?text=图片4',
          thumbUrl: 'https://via.placeholder.com/100x80?text=图片4',
          info: '21:15:14 小豆洲'
        },
        {
          id: 5,
          largeUrl: 'https://via.placeholder.com/800x400?text=图片5',
          thumbUrl: 'https://via.placeholder.com/100x80?text=图片5',
          info: '21:12:14 小豆洲'
        },
        {
          id: 6,
          largeUrl: 'https://via.placeholder.com/800x400?text=图片6',
          thumbUrl: 'https://via.placeholder.com/100x80?text=图片6',
          info: '21:13:24 小豆洲'
        }
      ]

      // DOM元素
      const largeImage = document.getElementById('largeImage')
      const thumbnailScroll = document.getElementById('thumbnailScroll')
      const prevBtn = document.getElementById('prevBtn')
      const nextBtn = document.getElementById('nextBtn')

      let currentIndex = 0

      // 初始化缩略图
      function initThumbnails() {
        thumbnailScroll.innerHTML = ''

        images.forEach((image, index) => {
          const thumb = document.createElement('div')
          thumb.className = 'thumbnail'
          if (index === currentIndex) {
            thumb.classList.add('active')
          }

          const img = document.createElement('img')
          img.src = image.thumbUrl
          img.alt = `缩略图 ${index + 1}`

          thumb.appendChild(img)
          thumb.addEventListener('click', () => {
            updateLargeImage(index)
          })

          thumbnailScroll.appendChild(thumb)
        })

        // 默认显示第一张图片
        if (images.length > 0) {
          updateLargeImage(0)
        }
      }

      // 更新大图显示
      function updateLargeImage(index) {
        currentIndex = index
        const image = images[index]

        largeImage.src = image.largeUrl
        // imageInfo.textContent = image.info

        // 更新缩略图选中状态
        const thumbs = document.querySelectorAll('.thumbnail')
        thumbs.forEach((thumb, i) => {
          if (i === index) {
            thumb.classList.add('active')
          } else {
            thumb.classList.remove('active')
          }
        })

        // 滚动到选中的缩略图
        const thumbWidth = 110 // 缩略图宽度 + 边距
        thumbnailScroll.scrollTo({
          left: index * thumbWidth - thumbnailScroll.offsetWidth / 2 + thumbWidth / 2,
          behavior: 'smooth'
        })
      }

      // 切换到上一张图片
      function prevImage() {
        if (currentIndex > 0) {
          updateLargeImage(currentIndex - 1)
        } else {
          updateLargeImage(images.length - 1)
        }
      }

      // 切换到下一张图片
      function nextImage() {
        if (currentIndex < images.length - 1) {
          updateLargeImage(currentIndex + 1)
        } else {
          updateLargeImage(0)
        }
      }

      // 事件监听
      prevBtn.addEventListener('click', prevImage)
      nextBtn.addEventListener('click', nextImage)

      // 初始化
      initThumbnails()
    </script>
  </body>
</html>
